<template>
    <div class="tab_content" v-if="isShow">
        <router-link to="/home">
            <div class="router-link-item">
                <div v-if="routePath == '/home'" class="iconfont icon-31shouyexuanzhong"></div>
                <div v-else class="iconfont icon-31shouye"></div>
                <span>首页</span>
            </div>
        </router-link>
        <router-link to="/find">
            <div class="router-link-item">
                <div
                    v-if="routePath.substring(0, 5) == '/find'"
                    class="iconfont icon-fenleiorguangchangorqitatianchong icon-active"
                ></div>
                <div v-else class="iconfont icon-fenleiorguangchangorqita"></div>
                <span>发现</span>
            </div>
        </router-link>
        <router-link to="/read">
            <div class="router-link-item">
                <div v-if="routePath == '/read'" class="iconfont icon-shuji2"></div>
                <div v-else class="iconfont icon-shuji"></div>
                <span>连载</span>
            </div>
        </router-link>
        <router-link to="/personal">
            <div class="router-link-item">
                <div v-if="routePath == '/personal'" class="iconfont icon-jurassic_user1"></div>
                <div v-else class="iconfont icon-jurassic_user"></div>
                <span>个人中心</span>
            </div>
        </router-link>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from '@vue/runtime-core'
import { useRoute } from 'vue-router'
import {useStore} from "vuex"
const store = useStore()
let routePath = ref<string>('')
let isShow = ref<boolean>(true)
const route = useRoute()
watch(() => route.path, newRoute => {
    console.log(newRoute);
    routePath.value = newRoute
    if (!['/home', '/read', '/find', '/personal'].includes(newRoute.split('?')[0])) {
        store.commit('changeTabisShow',false)
        isShow.value = false
    } else {
        store.commit('changeTabisShow',true)
        isShow.value = true
    }
})
</script>

<style lang="less">
.tab_content {
    position: fixed;
    width: 100%;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    background: #fff;
    border-top: 1px solid #dbdbdb;
    .iconfont {
        font-size: 32px;
    }
    .icon-active {
        color: black;
    }
    a {
        color: #5f5f5f;
        text-decoration: none;
    }
    .router-link-active {
        color: black;
    }
    .router-link-item {
        text-align: center;
    }
}
</style>